<template>
  <el-form-item label="频道"  prop="channelId">
    <el-select v-model="channelId" placeholder="请选择频道" @change="hChange">
      <el-option
      v-for="channel in channelList"
      :key="channel.id"
      :label="channel.name"
      :value="channel.id"></el-option>
    </el-select>
    {{value}} - <button @click="hChange">更改值</button>
  </el-form-item>
</template>

<script>
//  1. 取回频道数据
//   - 根据接口文档,在加载组件时调用方法
//  2. 把数据显示在视图上。
//   - v-for循环绑定数据
export default {
  name: 'Channel',
  props: ['value'],
  data () {
    return {
      channelId: this.value,
      channelList: []
    }
  },
  created () {
    this.loadChannels()
  },
  watch: {
    // "value": function (newVal, oldVal) {
    value (newVal, oldVal) {
      // console.log(Date.now(), 'value........', newVal, oldVal)
      this.channelId = newVal
    }
  },
  methods: {
    hChange () {
      // 把当前用户选中的值抛出来
      this.$emit('input', this.channelId)
    },
    async loadChannels () {
      // 取回频道数据
      const result = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/channels'
      })
      console.log('频道数据', result)
      this.channelList = result.data.data.channels
    }
  }
}
</script>
